<template>
    <div v-if="datafinished" class="dialog-container">
        <div v-if="form.seqType=='tree'">
            <el-row>
                <el-col :span="11">
                    <dx-treelist :codeType="form.codeType"></dx-treelist>
                </el-col>
                <el-col :offset="1" :span="11">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>DxTreeList使用说明</span>
                        </div>
                        <div class="html-content" v-text="htmlTips.treeListText"></div>
                    </el-card>
                </el-col>
            </el-row>
            <br><br><br>
          
            <el-row>
                <el-col :span="11">


                    <el-row>

                        <el-col :span="4">{{sel}}</el-col>
                        <el-col :span="10"><el-input v-model="value1"></el-input></el-col>
                        <el-col :span="10"><el-button type="primary" @click="testValue">测试</el-button></el-col>
                        
                    </el-row>
                    <dx-treeselect :codeType="form.codeType" @change="changeValue" placeholder="全部" :clearable="true" :leafable="true" :filterable="true" v-model="sel"></dx-treeselect>
                </el-col>
                <el-col :offset="1" :span="11">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>DxTreeSelect使用说明</span>
                        </div>
                        <div class="html-content" v-text="htmlTips.treeSelectText"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div v-else>
            <el-row>
                <el-col :span="11">
                    <dx-select v-model="value1" :codeType="form.codeType" :multiple="true" :condition="{module_name:moduleName}"></dx-select>
                </el-col>
                <el-col :offset="1" :span="11">

                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>DxSelect使用说明</span>
                        </div>
                        <div class="html-content" v-text="htmlTips.selectText"></div>
                    </el-card>
                </el-col>
            </el-row>
            <br><br><br>
            <el-row>
                <el-col :span="11">
                    <dx-check-box v-model="value1" :checkAll="true" :codeType="form.codeType"></dx-check-box>
                </el-col>
                <el-col :offset="1" :span="11">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>DxCheckbox使用说明</span>
                        </div>
                        <div class="html-content" v-text="htmlTips.checkboxText"></div>
                    </el-card>
                </el-col>
            </el-row>
            <br><br><br>
            <el-row>
                <el-col :span="11">
                    <dx-radio  v-model="value1" :codeType="form.codeType"></dx-radio>
                </el-col>
                <el-col :offset="1" :span="11">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>DxRadio使用说明</span>
                        </div>
                        <div class="html-content" v-text="htmlTips.radioText"></div>
                    </el-card>
                </el-col>
            </el-row>
            <br><br><br>
            <el-row>
                <el-col :span="11">
                    &nbsp;
                </el-col>
                <el-col :offset="1" :span="11">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>DxText使用说明</span>
                        </div>
                        <div class="html-content" v-text="htmlTips.text"></div>
                    </el-card>
                </el-col>
            </el-row>
            <br><br><br>
            
        </div>
    </div>
</template>
<script>
import DxSelect from '../../Common/ui/dx-select'
import DxCheckBox from '../../Common/ui/dx-checkbox'
import DxTreelist from '../../Common/ui/dx-treelist'
import DxTreeselect from '../../Common/ui/dx-treeselect'

import DxRadio from '../../Common/ui/dx-radio'
import DxText from '../../Common/ui/dx-text'
import http from '../../../assets/js/http.js'
import toolkit from '../../../assets/js/toolkit.js'
import { setTimeout } from 'timers';
export default {

    components : {
        DxSelect,
        DxCheckBox,
        DxRadio,
        DxText,
        DxTreelist,
        DxTreeselect
    },
    props :{
        id : String,
    },
    data(){
        return {
            sel:4,
            value1 : "",
            moduleName : '',
            datafinished : false,
            htmlTips : {
                selectText : '',
                checkboxText : '',
                radioText : '',
            },
            form : {
                id : this.id,
                codeType : '',
                name : '',
                seqType : 'seq',
                categories : '1',
                sqlText : '',
                textField : '',
                valueField : '',
                orderList : 10,
                cachePageTime : 30000,
                enable : true,
            }
        }
    },
    methods : {
        changeValue(val){
            console.log('val->>>>',val);
        },
        testValue(){
            this.sel = this.value1;
        },
        initData(){
            this.apiGet('code/getEntry?id='+this.form.id).then(resp=>{
                if(resp.code == 200){
                    this.form = resp.data;
                    console.log(this.form);
                    this.form.enable = resp.data.enable==1?true:false;
                    this.datafinished = true;
                    //
                    this.htmlTips = {
                        selectText : `<dx-select v-model="fieldName" codeType="${this.form.codeType}"><el-option label="">全部</el-option></dx-select>`,
                        checkboxText : `<dx-check-box  v-model="fieldName" :checkAll="true" codeType="${this.form.codeType}"></dx-check-box>`,
                        radioText : `<dx-radio v-model="fieldName" codeType="${this.form.codeType}"></dx-radio>`,
                        text : `<dx-text value="1" codeType="${this.form.codeType}"></dx-text>`,
                        //
                        treeSelectText : `<dx-treeselect codeType="${this.form.codeType}"></dx-treeselect>`,
                        treeListText : `<dx-treelist codeType="${this.form.codeType}"></dx-treelist>`,
                    };
                }else{
                    _g.toastMsg("warn",resp.msg);
                    setTimeout(()=>{
                        this.dialogVisible = false;
                    },1000);
                }
                
            });
        }
    },
    created(){
        this.initData();
        // setTimeout(()=>{
        //     this.moduleName = 'esp_sms_task'
        // },5000);
 
    },
    mounted(){
        this.routeName = this.$route.name;
        _g.closeGlobalLoading();
    },
    mixins:[http,toolkit]
}
</script>

<style scoped>
@import '../../../assets/css/framework.css';
.dialog-container{
    height: 60vh;
    overflow: auto;
}
.html-content{
    font: 18px;
    font-weight: bold;
    color: #3182bd;
}
</style>
